<template>
  <div>
    <div class="content">
      <el-card class="left">
        <div class="title">待分配</div>
        <div>
          <div v-for="item in list" :key="item.index" @click="bedMove(item.id)">
            <div class="item-box">
              <div>{{ item.name }} [{{ item.sex === 2 ? "女" : "男" }}]</div>
              <div>{{ item.visitId }}</div>
            </div>
          </div>
        </div>
      </el-card>

      <el-card class="center" style="margin: 0 10px">
        <div class="title">床位</div>
        <div style="display: flex;flex-flow: wrap;">
          <div v-for="item in bedList" :key="item.index" class="bed-box">
            <div style="border-bottom: 1px solid rgb(155 156 159);font-weight: 500;">
              {{ item.bed_code_name }}
            </div>
            <div style="display: flex">
              <div class="bed-info">
                <div v-if="item.name">
                  <div>{{ item.name }}</div>
                  <div>{{ item.visit_id }}</div>
                  <el-button
                    type="primary"
                    @click="bedMove(item.patient_id)"
                  >转床
                  </el-button>
                  <el-button
                    @click="openPage(item)"
                  >转出方式
                  </el-button>
                </div>
                <div v-if="!item.name">未安排人员</div>
              </div>
              <!-- 监护仪 -->
              <div class="bed-info" style="line-height: 52px">
                <div>{{ item.monitor_code }}-{{ item.monitor_ip }}</div>
                <div v-if="item.monitor_code == ''">
                  <el-button
                    type="primary"
                    @click="monitorBindClick(item)"
                  >绑定监护仪
                  </el-button>
                </div>
                <div v-else>
                  <el-button
                    type="primary"
                    @click="monitorUnbindClick(item)"
                  >解绑监护仪
                  </el-button>
                </div>
              </div>

              <div v-if="respiratorShowFlag" class="bed-info"
                   :style="{lineHeight: item.numbers == '' ? '52px': '30px'}">
                <div>{{ item.numbers }}-{{ item.respirator_number }}</div>
                <div>{{ item.box_ip }}</div>
                <el-button
                  type="primary"
                  @click="toBindRespirator(item)"
                >绑定呼吸机
                </el-button>
              </div>
            </div>

          </div>
        </div>
      </el-card>
    </div>
    <!--  待分配弹窗-->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      custom-class="role-mask"
      class="fenpei"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label=" 待分配病人" name="first">
          <div
            style="
                                width: 430px;
                                height: 600px;
                                overflow: hidden;
                                overflow-y: scroll;
                              "
          >
            <div
              v-for="item in list"
              :key="item.index"
              style="float: left"
            >
              <div class="card_font" @click="Select(item)">
                <div
                  style="
                                      width: 183px;
                                      height: 54px;
                                      border-radius: 4px;
                                      background: rgb(209 229 255);
                                      margin-right: 10px;
                                      margin-left: 13px;
                                      margin-bottom: 12px;
                                      cursor: pointer;
                                      text-align: center;
                                    "
                >
                                    <span
                                      style="
                                        width: 183px;
                                        display: inline-block;
                                        text-align: center;
                                        line-height: 55px;
                                      "
                                    >
                                      [{{ item.sex === 0 ? "女" : "男" }}]
                                      {{ item.name }}
                                      [{{ item.visit_id }}]
                                    </span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="出科病人" name="second">
          <div
            style="
                                width: 430px;
                                height: 600px;
                                overflow: hidden;
                                overflow-y: scroll;
                              "
          >
            <div
              v-for="item in list2"
              :key="item.index"
              style="float: left"
            >
              <div class="card_font" @click="Select(item)">
                <div style="
                    width: 183px;
                    height: 54px;
                    border-radius: 4px;
                    background: rgb(189 236 211);
                    margin-right: 10px;
                    margin-left: 13px;
                    margin-bottom: 12px;
                    cursor: pointer;
                    text-align: center;
                  "
                >
                  <span
                    style="
                      width: 183px;
                      display: inline-block;
                      text-align: center;
                      line-height: 55px;
                    "
                  >
                    [{{ item.sex === 0 ? "女" : "男" }}]
                    {{ item.name }}
                    [{{ item.visit_id }}]
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 出科弹窗 -->
    <el-dialog
      title="出科出院死亡"
      :visible.sync="isShow"
      style="line-height: 50px;"
      width="30%"
    >
      <div>
        <span style="display: inline-block;width: 80px">方式:</span>
        <el-select
          v-model="exitType"
          @change="exitTypeChange"
          clearable
          placeholder="请选择"
          class="el-inputer"
        >
          <el-option
            v-for="item in graduateoptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div v-if="departmentCodeFlag">
        <span style="display: inline-block;width: 80px">去向科室:</span>
        <el-select
          v-model="toDepartmentCode"
          placeholder="请选择"
          clearable
          class="el-inputer"
        >
          <el-option
            v-for="item in listarr"
            :key="item.id"
            :label="item.department_name"
            :value="item.department_code"
          ></el-option>
        </el-select>
      </div>
      <div v-if="departmentCodeFlag">
        <span style="display: inline-block;width: 80px">转出科时间:</span>
        <el-date-picker
          v-model="exitTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          class="el-inputer"
          style="width: 200px"
        >
        </el-date-picker>
      </div>
      <div v-if="deathTimeFlag">
        <span style="display: inline-block;width: 80px">死亡时间:</span>
        <el-date-picker
          v-model="deathTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          class="el-inputer"
          style="width: 200px"
        >
        </el-date-picker>
      </div>
      <div v-if="dischargeFlag">
        <span style="display: inline-block;width: 80px">出院时间:</span>
        <el-date-picker
          v-model="exitTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间"
          class="el-inputer"
          style="width: 200px"
        >
        </el-date-picker>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeExitTypePage">取 消</el-button>
        <el-button type="primary" @click="openExitTypePage">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 转床弹窗 -->
    <el-dialog
      title="床位"
      :visible.sync="dialogVisibleqiangjuan"
      width="30%"
    >
      <div>
        <span>床位选择：</span>
        <el-select
          v-model="selectedBed"
          clearable
          placeholder="请选择"
          class="el-inputer"
          @change="huogong"
        >
          <el-option
            v-for="item in luoxuanjizai"
            :key="item.id"
            :label="item.bedCode"
            :value="item.bedCode"
          ></el-option>
        </el-select>
        <span style="color: red;font-size: 13px;padding-left: 10px">  床位如未选择，确定将解绑床位!</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveCancel()">取消</el-button>
        <el-button type="primary" @click="saveLuoxuanwan()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="监护仪"
      :visible.sync="monitorDialog"
    >
      <div style="display: flex;flex-wrap: wrap">
        <div
          v-for="item in monitor"
          :key="item.index"
          @click="Selectjian(item)"
          style="
              width: 160px;
              line-height: 40px;
              border-radius: 4px;
              background: rgb(189 236 211);
              cursor: pointer;
              text-align: center;
              margin: 10px;
            "
        >
          [{{ item.monitorCode }}-{{ item.monitorIp }}]
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
              <el-button @click="monitorDialog = false">取 消</el-button>
            </span>
    </el-dialog>

    <!-- 绑定呼吸机 -->
    <el-dialog
      title="绑定呼吸机及转换盒子"
      :visible.sync="respiratorFlag"
    >
      <div style="height: 600px; overflow-y: auto;display: flex">
        <el-card style="width: 75%;text-align:center;">
          <div>呼吸机</div>
          <div style="display: flex">
            <div
              v-for="items in respiratorList"
              :key="items.index"
              @click="SelectResprator(items)"
              style="
                      width: 130px;
                      line-height: 30px;
                      border-radius: 4px;
                      background: rgb(189 236 211);
                      margin: 10px;
                      cursor: pointer;
                    "
            >
              <div>{{ items.numbers }}-{{ items.respirator_number }}</div>
              <div>[{{ items.box_numbers }}-{{ items.box_ip }}]</div>
            </div>
          </div>
        </el-card>

        <el-card v-show="respiratorBoxFlag" style="width: 25%;">
          <div style="text-align:center;">绑定转换盒子
            <el-button @click="bindBox">确定</el-button>
          </div>
          <div
            v-for="item in respiratorBoxList"
            :key="item.index"
            style="
                      width: 160px;
                      line-height: 30px;
                      border-radius: 4px;
                      background: rgb(189 236 211);
                      padding-left: 5px;
                      margin: 10px;
                      cursor: pointer;
                    "
          >
            <el-checkbox-group v-model="boxCheckList" @change="boxCheckChange">
              <el-checkbox
                :label="item.box_numbers"
              >
                [{{ item.box_numbers }}-{{ item.box_ip }}]
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noBindRespirator">取 消</el-button>
        <el-button type="primary" @click="bindRespirator">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNoBedPatientList,
  getBedPatientList,
  getNoBedMonitorList,
  addBedArrange,
  restoreBedArrange,
  patientGiven,
  patientgetupdateBedCode,
  patientgetBedNullPatientList,
  deparqueryList,
  patientGetOutPatientList,
  updatePatientById,
  respiratorDictonaryQueryList,
  respiratorBoxDictonaryQueryList,
  queryBindBoxList,
  boxBindRespirator,
  respiratorBindBed
} from "@/api/table";
import Kanban from "@/components/Kanban";
import comNumber from "@/views/interactive/comNumber";
import {dateUtils} from "@/utils/dateUtils";

export default {
  components: {
    Kanban,
    comNumber
  },
  data() {
    return {
      bindBoxId: "",
      boxCheckList: [],
      respiratorShowFlag: false,
      respiratorList: [],
      respiratorBoxList: [],
      respiratorNameShow: "",
      respiratorName: "",
      respiratorManufacturers: "",
      respiratorNumber: "",
      respiratorId: "",
      comNumber: "",
      computerNumber: "",
      comNumberId: "",
      bedCodeBind: "",
      bindRespiratorId: "",
      respiratorFlag: false,
      respiratorBoxFlag: false,
      respiratorEntity: {},
      id: "",
      exitType: "转出科",
      exitTime: "",
      deathTime: "",
      departmentCode: "",
      toDepartmentCode: '',
      departmentCodeFlag: false,
      deathTimeFlag: false,
      dischargeFlag: false,
      dialogVisible: false,
      isShow: false,
      dialogVisibleqiangjuan: false,
      isShows: false,
      monitorDialog: false,
      selectedBed: "",
      activeName: "first",
      luoxuanjizai: [],
      huoji: "",
      damuji: "",
      graduate: "",
      list: [],
      list2: [],
      bedList: [],
      monitor: [],
      listarr: [],
      bedCode: "",
      patientId: "",
      valuequ: "",
      ids: "",
      monitorCode: "",
      bedCodes: "",
      graduateoptions: [
        {
          id: "4",
          value: "转出科",
          label: "转出科",
        },
        {
          id: "5",
          value: "出院",
          label: "出院",
        },
        {
          id: "6",
          value: "死亡",
          label: "死亡",
        },
      ],
      patients: "",
    };
  },

  created() {
  },
  mounted() {
    if (this.$store.state.user.name == '超级管理员') {
      this.respiratorShowFlag = true;
    }
    this.getNoBedPatientList();
    this.cert();
    //出科下拉
    deparqueryList().then((res) => {
      this.listarr = res.data;
    });
  },
  methods: {
    //打开页面
    openPage(info) {
      this.isShow = true;

      this.id = info.patient_id;
      this.departmentCode = info.department_code;

      if (this.exitType == '转出科') {
        this.departmentCodeFlag = true;
        this.dischargeFlag = false;
        this.deathTimeFlag = false;
      }
    },
    openExitTypePage() {
      var param = {};

      if (this.exitType == '转出科') {
        if (this.exitTime == '') {
          this.$message({type: "warning", message: "请填写出科时间"});
          return;
        }
        param = {
          "id": this.id,
          "exitType": this.exitType,
          "exitTime": this.exitTime,
          "departmentCode": this.departmentCode,
          "toDepartmentCode": this.toDepartmentCode,
          "flag": "0",
        }
      } else if (this.exitType == '出院') {
        if (this.exitTime == '') {
          this.$message({type: "warning", message: "请填写出院时间"});
          return;
        }
        param = {
          "id": this.id,
          "exitType": this.exitType,
          "exitTime": this.exitTime,
          "flag": "0",
        }
      } else if (this.exitType == '死亡') {
        if (this.deathTime == '') {
          this.$message({type: "warning", message: "请填写死亡时间"});
          return;
        }
        param = {
          "id": this.id,
          "exitType": this.exitType,
          "exitTime": this.exitTime,
          "deathTime": this.deathTime,
          "flag": "0",
        }
      }
      updatePatientById(param).then((res) => {
        if (res.code == 200) {
          this.$message({type: "info", message: res.msg,});
          this.claerData();
          this.getNoBedPatientList();
        }
      });
    },
    //清除数据
    claerData() {
      this.id = "";
      this.isShow = false;
      this.departmentCodeFlag = false;
      this.dischargeFlag = false;
      this.deathTimeFlag = false;
      this.enterTime = "";
      this.exitTime = "";
      this.deathTime = "";
      this.exitType = "转出科";
      this.toDepartmentCode = "";
    },
    //取消页面
    closeExitTypePage() {
      this.claerData();
    },
    //出院、转出科、死亡
    exitTypeChange(val) {
      this.exitType = val;
      if (this.exitType == '转出科') {
        this.departmentCodeFlag = true;
        this.dischargeFlag = false;
        this.deathTimeFlag = false;
      } else if (this.exitType == '出院') {
        this.dischargeFlag = true;
        this.departmentCodeFlag = false;
        this.deathTimeFlag = false;
      } else if (this.exitType == '死亡') {
        this.deathTimeFlag = true;
        this.dischargeFlag = false;
        this.departmentCodeFlag = false;
      }
    },
    //绑定呼吸机打开页面
    toBindRespirator(item) {
      this.bedCodeBind = item.bed_code;
      queryBindBoxList({}).then((res) => {
        this.respiratorList = res.data;
      });
      respiratorBoxDictonaryQueryList({
        status: 1,
      }).then((res) => {
        this.respiratorBoxList = res.data;
      });
      this.respiratorFlag = true;
    },
    getNoBedPatientList() {
      //待分配
      getNoBedPatientList({
        flag: 1,
      }).then((res) => {
        this.list = res.data;
      });
      //出科
      getNoBedPatientList({
        flag: 0,
      }).then((res) => {
        this.list2 = res.data;
      });
      //床位列表
      getBedPatientList().then((res) => {
        this.bedList = res.data;
      });
    },
    cert() {
      //未分配的监护仪
      getNoBedMonitorList().then((res) => {
        this.monitor = res.data;
        //console.log(this.monitor, "123");
      });
    },

    //选中获取床位idcode
    choice(index) {
      //console.log(index, "index");
      this.bedCode = index.bed_code;
      this.dialogVisible = true;
    },
    monitorBindClick(index) {
      this.bedCode = index.bed_code;
      this.monitorDialog = true;
    },
    monitorUnbindClick(item) {
      this.$confirm('此操作将解绑监护仪, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        restoreBedArrange({
          monitorCode: item.monitor_code,
          bedCode: item.bed_code,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '解绑成功!'
          });
          this.getNoBedPatientList();
          this.cert();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        });
      });
    },

    //选中床位
    Select(index) {
      // console.log(index, "select");
      this.patientId = index.id;
      addBedArrange({
        patientId: this.patientId,
        bedCode: this.bedCode,
        monitorCode: "",
      }).then((res) => {
        this.dialogVisible = false;
        this.getNoBedPatientList();
      });
    },
    //监护仪
    Selectjian(index) {
      this.monitorCode = index.monitorCode;
      addBedArrange({
        patientId: "",
        bedCode: this.bedCode,
        monitorCode: this.monitorCode,
      }).then((res) => {
        this.monitorDialog = false;
        this.getNoBedPatientList();
        this.cert();
      });
    },
    huogong(e) {
      this.huoji = e;
    },
    bedMove(id) {
      if (id == "") {
        alert("未绑定患者!");
        return;
      }
      this.dialogVisibleqiangjuan = true;
      this.selectedBed = "";
      patientgetBedNullPatientList().then((res) => {
        this.luoxuanjizai = res.data;
        this.damuji = id;
      });
    },

    saveCancel() {
      this.dialogVisibleqiangjuan = false;
      this.damuji = "";
      this.huoji == ""
    },
    saveLuoxuanwan() {
      patientgetupdateBedCode({id: this.damuji, bedCode: this.selectedBed}).then((res) => {
        this.getNoBedPatientList();
        this.cert();
        this.damuji = "";
        this.huoji == ""
        this.dialogVisibleqiangjuan = false;
      });

    },
    //出科
    Isgiven(item) {
      this.isShow = true;
      this.ids = item.patient_id;
      this.bedCodes = item.bedCode;
      //console.log(item, "chuke");
    },
    //出科确认
    giveBtn() {
      this.isShow = false;
      patientGiven({
        patientId: this.ids,
        bedCode: this.bedCodes,
        exitType: this.graduate,
        toDepartmentCode: this.valuequ,
        exitTime: dateUtils(2),
      }).then((res) => {
        this.getNoBedPatientList();
      });
    },
    //切换
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    //分配床位
    sing(item) {
      this.isShows = true;
      this.patients = item.id;
    },
    //待分配直接出科
    giveBtns() {
      this.isShows = false;
      patientGiven({
        patientId: this.patients,
        bedCode: "",
        exitType: this.graduate,
        toDepartmentCode: this.valuequ,
        exitTime: dateUtils(2),
      }).then((res) => {
        this.getNoBedPatientList();
      });
    },
    //呼吸机列表
    getRespiratorList() {
      queryBindBoxList({}).then((res) => {
        this.respiratorList = res.data;
      });
    },
    //绑定呼吸机
    SelectResprator(item) {
      this.boxCheckList = [];
      if (item.box_numbers != null && item.box_numbers != "") {
        this.boxCheckList.push(item.box_numbers);
      }
      this.respiratorId = item.id;
      this.bindRespiratorId = item.id;
      this.bindBoxId = item.box_numbers;
      this.respiratorBoxFlag = true;
    },
    //绑定盒子
    bindBox() {
      if (this.respiratorId == "") {
        alert("请选中呼吸机");
        return;
      }
      if (this.boxCheckList.length == 0) {
        alert("请选中转换盒子");
        return;
      }
      if (this.boxCheckList.length > 1) {
        alert("转换盒子不能选中多个，采用1对1方式");
        return;
      }
      //绑定
      boxBindRespirator({
        boxNumbers: this.boxCheckList[0],
        respiratorId: this.respiratorId
      }).then((res) => {
        if (res.code == 200) {
          this.$message({type: "success", message: "绑定盒子成功"});
          this.respiratorId = "";
          this.boxCheckList = [];
          this.respiratorBoxFlag = false;
          this.getRespiratorList();
        } else {
          this.$message({type: "warning", message: "绑定盒子失败"});
        }
      });
    },
    openRespratorBoxList() {
      this.bedCodeBind = item.bed_code;
      this.bindRespiratorId = item.bed_bind_respirator_id;
      respiratorDictonaryQueryList({
        status: 1,
      }).then((res) => {
        this.respiratorList = res.data;
      });
      this.respiratorFlag = true;
    },
    //床位绑定呼吸机
    bindRespirator() {
      if (this.bindRespiratorId == "") {
        alert("请选择呼吸机");
        return;
      }
      if (this.bindBoxId == "" || this.bindBoxId == null) {
        alert("呼吸机未绑定盒子，请先绑定盒子");
        return;
      }
      respiratorBindBed({
        bedCode: this.bedCodeBind,
        respiratorNumbers: this.respiratorId
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "绑定呼吸机成功",
          });
          this.bindRespiratorId = "";
          this.respiratorFlag = false;
          this.getNoBedPatientList();
          this.cert();
        } else {
          this.$message({
            type: "warn",
            message: "绑定呼吸机失败",
          });
        }
      });
    },
    //取消床位绑定呼吸机
    noBindRespirator() {
      this.bindRespiratorId = "";
      this.respiratorFlag = false;
    },
    boxCheckChange(value) {

    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
}

.left {
  width: 250px;
}

.center {
  width: 100%;
  height: 800px;
  overflow-y: auto;
}

.title {
  text-align: center;
  font-weight: 600;
  line-height: 50px;
  border-bottom: 1px solid #999999;
}

.item-box {
  text-align: center;
  line-height: 30px;
  border: 1px solid #999999;
  border-radius: 4px;
  margin: 10px auto;
  padding: 5px;
}

.bed-box {
  text-align: center;
  margin: 10px;

  .bed-info {
    width: 200px;
    height: 110px;
    line-height: 30px;
    border: 1px solid #999999;
    border-radius: 4px;
    margin: 10px;
    padding: 5px;
  }
}
</style>

